<template>
  <div class="form-container">
    <ul class="form-container-left">
      <li
        v-for="(menu, index) in menusList"
        :key="index"
        :class="{ active: active == menu.component }"
        @click="handleTableClick(menu)"
      >
        <span>{{ menu.name }}</span>
      </li>
    </ul>
    <div class="form-container-right">
      <component
        ref="component"
        :is="active"
        :template-id="templateId"
        :template-name="templateName"
      />
    </div>
  </div>
</template>
<script>
import AuthSetting from '@src/modules/setting/projectManage/components/AuthSetting';
import AdditionalSetting from '@src/modules/setting/projectManage/components/AdditionalSetting';
import WorkLog from '@src/modules/setting/projectManage/components/WorkLog.vue';
import SatisfiedReviewSetting from '@src/modules/setting/projectManage/components/SatisfiedReviewSetting.vue';

import TriggerSetting from '@src/modules/setting/projectManage/components/TriggerSetting';
import { getRootWindow } from '@src/util/dom'
import { openAccurateTab } from '@src/util/platform';

import { PageRoutesTypeEnum } from '@model/enum/PageRoutesEnum'

export default {
  name: 'project-advanced-design',
  props: {
    templateId: {
      type: String | Number,
      default: '',
    },
    templateName: {
      type: String | Number,
      default: '',
    }
  },
  components: {
    [AuthSetting.name]: AuthSetting,
    [AdditionalSetting.name]: AdditionalSetting,
    [WorkLog.name]: WorkLog,
    [TriggerSetting.name]: TriggerSetting,
    [SatisfiedReviewSetting.name]: SatisfiedReviewSetting,
  },
  data() {
    return {
      active: 'auth-setting',
    }
  },
  computed: {
    menus() {
      return [
        {
          name: this.$t('common.base.settingPerssion'),
          component: AuthSetting.name,
          show: true,
        },
        {
          name: this.t('task.record.taskCard'),
          component: AdditionalSetting.name,
          show: true,
        },
        {
          name: this.$t('projectManage.setting.workLog.text'),
          component: WorkLog.name,
          show: true,
        },
        {
          name: this.$t('common.connector.title.trigger'),
          component: TriggerSetting.name,
          show: this.triggerGray,
        },
        {
          name: this.$t('common.pageTitle.pageSettingMessage'),
          link: `/setting/message`,
          component: '',
          show: true,
        },
          // 满意度回访设置
        {
          name: this.$t('projectManage.review.module'),
          component: SatisfiedReviewSetting.name,
          show: this.satisfactionGray,
        },
      ];
    },
    menusList() {
      return this.menus.filter((item) => item.show)
    },
    triggerGray(){
      const RootWindow = getRootWindow(window);
      return RootWindow.grayAuth?.TRIGGER || false;
    },
    satisfactionGray() {
      const RootWindow = getRootWindow(window);
      return RootWindow.grayAuth?.satisfaction || false;
    },
  },
  methods: {
    handleTableClick(menu) {
      if(menu.link) {
        // 跳转动消息中心
        openAccurateTab({
          type: PageRoutesTypeEnum.PageSettingMessage,
          params: `projectTypeId=${this.templateId}`,
        })
      } else {
        this.active = menu.component;
      }
    },
  }
};
</script>
<style lang="scss" scoped>
@import '@src/modules/setting/projectManage/common/stepCommon.scss';
</style>